<template>
	<view class="page">
		<view class="header">
			<yzh-Header :title="'优惠发放'" :bgColor="'#8E8FA1'"></yzh-Header>
			<!-- #ifdef MP-WEIXIN -->
			<image src="@/static/yzh/asbg.jpg"></image>
			<!-- #endif -->
		</view>
		<view class="body">
			<uni-card>
				<u--form v-model="form" :model="form" ref="form">
					<u-form-item label="优惠券名称" prop="name" :labelWidth="120">
						<u--input v-model="form.name" placeholder="请输入名称" border="surround" shape="circle"></u--input>
					</u-form-item>
					<u-form-item label="优惠券类型" prop="type" :labelWidth="120">
						<u-radio-group v-model="form.type">
							<u-radio shape="circle" label="满减券" name="1"></u-radio>
							<u-radio shape="circle" label="打折券" name="2"></u-radio>
						</u-radio-group>
					</u-form-item>
					<u-form-item :label="' '" :labelWidth="120" prop="content">
						<view v-if="form.type==1" class="money">
							<text>满</text>
							<view>
								<u--input border="bottom" v-model="form.content.man" type="number"></u--input>
							</view>
							<text>元减</text>
							<view>
								<u--input border="bottom" v-model="form.content.jian" type="number"></u--input>
							</view>
							<text>元</text>
						</view>
						<view v-if="form.type==2" class="money">
							<text>打</text>
							<view><u--input border="bottom" v-model="form.content.zhe"></u--input></view>
							<text>折</text>
						</view>
					</u-form-item>
					<u-form-item label="发放开始时间" prop="sStartTime" :labelWidth="120">
						<uni-datetime-picker v-model="form.sStartTime" type="date" @maskClick="" />
					</u-form-item>
					<u-form-item label="发放结束时间" prop="sEndTime" :labelWidth="120">
						<uni-datetime-picker v-model="form.sEndTime" type="date" @maskClick="" :start="sLimit"
							:disabled="sDisable" />
					</u-form-item>
					<u-form-item label="投放数量" prop="sCount" :labelWidth="120">
						<u--input v-model="form.sCount" border="surround" shape="circle" type="number"></u--input>
					</u-form-item>
					<u-form-item label="每人限领" prop="gCount" :labelWidth="120">
						<u--input v-model="form.gCount" border="surround" shape="circle" type="number"></u--input>
					</u-form-item>
					<u-form-item label="开始有效时间" prop="uStartTime" :labelWidth="120">
						<uni-datetime-picker v-model="form.uStartTime" type="date" @maskClick="" />
					</u-form-item>
					<u-form-item label="结束有效时间" prop="uEndTime" :labelWidth="120">
						<uni-datetime-picker v-model="form.uEndTime" type="date" @maskClick="" :start="uLimit"
							:disabled="uDisable" />
					</u-form-item>
				</u--form>
			</uni-card>
			<view class="btn">
				<u-button text="确认投放" shape="circle"
					color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))" @click="confirm"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import Header from "@/components/Header/Header.vue";

	export default {
		components: {
			"yzh-Header": Header
		},
		data() {
			return {
				form: {
					name: "",
					type: "1",
					content: {
						man: 0,
						jian: 0,
						zhe: 100
					},
					sStartTime: "",
					sEndTime: "",
					sCount: 0,
					gCount: 0,
					uStartTime: "",
					uEndTime: ""
				},
				sLimit: null,
				uLimit: null,
				sDisable: true,
				uDisable: true,
				rules: {
					name: [{
						type: "string",
						required: true,
						message: "请输入优惠券名称",
						trigger: ["blur", "change"]
					}],
					type: [{
						type: "string",
						required: true,
						message: "请选择优惠券类型",
						trigger: ["blur", "change"]
					}],
					content: [{
						validator: (rule, value, callback) => {
							if (this.form.type == 1) {
								if (this.form.content.man <= 0) {
									callback(new Error('无效的满金额'));
								} else if (this.form.content.jian <= 0) {
									callback(new Error('无效的减金额'));
								} else if (this.form.content.man < this.form.content.jian) {
									callback(new Error('优惠金额不能大于满金额'));
								} else {
									callback();
								}
							} else if (this.form.type == 2) {
								if (!Number.isInteger(Number(this.form.content.zhe))) {
									callback(new Error("折扣必须为整数"))
								} else if (this.form.content.zhe < 1 || this.form.content.zhe > 100) {
									callback(new Error("折扣范围为[1-100]"))
								} else {
									callback();
								}
							} else {
								callback(new Error("错误的优惠券类型"))
							}
						}
					}],
					sStartTime: [{
							required: true,
							message: "请选择开始日期",
							trigger: ["blur", "change"]
						},
						{
							validator: (rule, value, callback) => {
								const now = new Date();
								const todayStart = new Date(now.getFullYear(), now.getMonth(), now.getDate())
									.getTime();
								const selectedTime = new Date(value).getTime();
								if (isNaN(selectedTime)) {
									callback(new Error('无效的时间格式'));
								} else if (selectedTime < todayStart) {
									callback(new Error('请选择今天或未来的时间'));
								} else {
									callback();
								}
							},
						}
					],
					sEndTime: [{
						type: "string",
						required: true,
						message: "请选择结束日期",
						trigger: 0["blur", "change"]
					}, {
						validator: (rule, value, callback) => {
							const now = new Date().getTime();
							if (value && new Date(value).getTime() < now) {
								callback(new Error('请选择未来的时间'));
							} else {
								callback();
							}
						},
					}],
					sCount: [{
						required: true,
						message: "请输入数量",
						trigger: ["blur", "change"]
					}, {
						type: "number",
						message: "请输入数字",
						trigger: ["blur", "change"]
					}, {
						validator: (rule, value, callback) => {
							if (value === undefined || value === null || value <= 0) {
								callback(new Error('数字必须大于0'));
							} else {
								callback();
							}
						},
						trigger: ['blur', 'change']
					}],
					gCount: [{
						required: true,
						message: "请输入限领数量",
						trigger: ["blur", "change"]
					}, {
						type: "number",
						message: "请输入数字",
						trigger: ["blur", "change"]
					}, {
						validator: (rule, value, callback) => {
							if (value === undefined || value === null || value <= 0) {
								callback(new Error('数字必须大于0'));
							} else {
								callback();
							}
						},
						trigger: ['blur', 'change']
					}],
					uStartTime: [{
							required: true,
							message: "请选择开始日期",
							trigger: ["blur", "change"]
						},
						{
							validator: (rule, value, callback) => {
								const now = new Date();
								const todayStart = new Date(now.getFullYear(), now.getMonth(), now.getDate())
									.getTime();
								const selectedTime = new Date(value).getTime();
								if (isNaN(selectedTime)) {
									callback(new Error('无效的时间格式'));
								} else if (selectedTime < todayStart) {
									callback(new Error('请选择今天或未来的时间'));
								} else {
									callback();
								}
							},
						}
					],
					uEndTime: [{
						type: "string",
						required: true,
						message: "请选择结束日期",
						trigger: ["blur", "change"]
					}, {
						validator: (rule, value, callback) => {
							console.log(value);
							const now = new Date().getTime();
							if (value && new Date(value).getTime() < now) {
								callback(new Error('请选择未来的时间'));
							} else {
								callback();
							}
						},
					}]
				}
			}
		},
		methods: {
			openCalendar() {
				this.calTag = true;
			},
			closeCalendar() {
				this.calTag = false;
			},
			confirm() {
				this.$refs.form.validate().then(res => {
					console.log('表单验证通过', res);
					// 提交表单数据...
					console.log(this.form)
					console.log(this.form.content)
				}).catch(err => {
					console.log('表单验证失败', err);
				});
			}
		},
		watch: {
			'form.sStartTime': function(newVal, oldVal) {
				if (newVal !== "" && newVal != null) {
					let date = new Date(newVal);
					date.setDate(date.getDate() + 1);
					this.sLimit = date.toISOString().split('T')[0];
					this.sDisable = false;
				} else {
					this.sLimit = null;
					this.sDisable = true;
				}
			},
			'form.uStartTime': function(newVal, oldVal) {
				if (newVal !== "" && newVal != null) {
					let date = new Date(newVal);
					date.setDate(date.getDate() + 1);
					this.uLimit = date.toISOString().split('T')[0];
					this.uDisable = false;
				} else {
					this.uLimit = null;
					this.uDisable = true;
				}
			}
		},
		onReady() {
			this.$refs.form.setRules(this.rules);
		}
	}
</script>

<style scoped>
	.page {
		/* #ifndef MP-WEIXIN */
		background-image: url('@/static/yzh/asbg.jpg');
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		height: 100vh;
		/* #endif */
	}

	.header {}

	.header>image {
		width: 100%;
		height: 500rpx;
		position: absolute;
		z-index: -1;
	}

	.body {
		position: relative;
		margin-top: 20%;
	}

	.money {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
	}

	.money>view {
		width: 150rpx;
	}

	.btn {
		width: 90%;
		margin: 0 auto;
	}
</style>